<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>内容管理</title>
<link href="/res/back/css/base.css" rel="stylesheet" type="text/css" />
<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/res/third/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<link href="/res/third/powerFloat/css/powerFloat.css" rel="stylesheet" type="text/css" />
<script src="/res/third/powerFloat/js/mini/jquery-powerFloat-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/res/third/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/res/third/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/res/third/ueditor/lang/zh-cn/zh-cn.js"></script>
<style type="text/css">
		.lpdiv{display: inline-block;float: left;margin-left: 220px;margin-top: 15px;width: 100%;}
		.showimgs{display:inline-block;}
		.delimgas{display:inline-block;margin-left:50px;cursor:pointer;}
	table td {
		padding-right: 5px;
	}
	#proTable,#companyTable {
        border-collapse: separate;
        border-spacing: 10px;
	}
</style>

</head>
<body>
    <div class="panel panel-info" style="height: 100%;overflow-y:scroll;">
	       <div class="panel-heading">
	          <h3 class="panel-title">修改</h3>
	        </div>
        <div class="panel-body" style="overflow: hidden;border-bottom: none;">
			<form class="form-horizontal" role="form"   id="mainForm">
			  <input type="hidden" name="id"  value="${ps.id!}">
			  <div class="form-group" style="margin-top:15px;">
			    <label for="title" class="col-sm-2 control-label">所在楼层:</label>
			    <div class="col-sm-5">	        
			        <select name="floor">
			        [#list getallfloor as getallfloor]
			        	<option [#if ps.floor==getallfloor]selected[/#if]>${getallfloor}</option>
			        [/#list]	
			        </select>  
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label for="title" class="col-sm-2 control-label">所属类目:</label>
			    <div class="col-sm-5">
                    <select name="categoryId" id="categoryId">
                        <option value="">请选择</option>
					[#list topCategoryList as cate]
                        <option value="${cate.id!}" [#if ps?? && ps.categoryId == cate.id]selected[/#if]>${cate.name!}</option>
					[/#list]
                    </select>
				</div>

			  </div>
			  
			  <div class="form-group">
			    <label for="title" class="col-sm-2 control-label" >左侧商铺:</label>
			    <div class="col-sm-8">
			    	<table id="companyTable">
			    	[#list ps.companyList as company]
			    	<tr>
			    		<td>
			    			<input type="number" min="1" id="" placeholder="序号" name="seq" value="${(company.seq)!}"  style="width: 45px; text-align: center;" maxlength="4">
			    		</td>
			    		<td>
			    		    <input type="text" placeholder="输入商铺链接"  required="required" name="companyUrl" value="${(company.companyUrl)!}">
			    		</td>
			    		<td>
			    		   <input type="button" onclick="addPicture(this)"  value="上传图片" >
							<div class="imgwrap" style="display: inline;"   >
			    		       <span>
     				       			<input type='hidden' name='companyImg' value='${(company.companyImg)!}'>
     				      		 <a target='_blank'   href="${company.companyImg!}"><img src="${company.companyImg!}" width="50px;" height="50px;"  ></a>
     				       		</span>
							</div>
			    		</td>
			    		<td>
			    		  [#if company_index==0]
			    		    <span style="font-size:30px;cursor: pointer;" onclick="addCompany()">+</span>
			    		  [#else]  
			    		    <span style="cursor:pointer;font-size: 15px" onclick="removeCompany(this)">删除</span>
			    		   [/#if] 
			    		</td>
			    	</tr>
			    	[/#list]
			    	</table>
                  </div>
			  </div>
			 
			 <div class="form-group">
			    <label for="title" class="col-sm-2 control-label" >右侧商品:</label>
			    <input type="hidden" name="id" >
			    <div class="col-sm-5">
			    <table id="proTable">
			    [#list ps.productList as product]
			    <tr>
			      [#--<input type="hidden" name="id" value="${(productList.id)!}">--]
			      <td>
					  <input type="number" min="1"  placeholder="序号" name="seq" value="${(product.seq)!}" style="width: 45px; text-align: center;" maxlength="4">
				  </td>
                      <input type="hidden"  placeholder="输入商品编号"  value="${(product.productId)!}"  name="productId"    required="required">
					  <td>
					   <input type="text"  placeholder="选择商品"  value="${product.name!}"  onclick="chooseProduct(this)"  name="name" readonly style="cursor: pointer;">
				   </td>
			       <td>
			      [#if product_index==0 ]
			      <span style="font-size:30px;cursor:pointer" onclick="addProduct()">+</span>
			      [#else]
			      <span style="cursor:pointer;font-size: 15px" onclick="removeProduct(this)">删除</span>
			      [/#if]
			      </td>
                [/#list]
	            </tr>
			    </table>
			    </div>
             </div>
			 
			 <div class="form-group" style="margin-top: 10px;">
					<div style="margin-left:300px;">
						<button onclick="insert();" type="button" class="btn btn-info">立即提交</button>
					</div>
			</div>
			</form>
        </div>

        <div style="display: none;width: 600px;" id="providerDiv">
            <div style="border: 1px solid #ddd;padding-bottom: 8px;">
                <div>
                    <input style="display: inline-block;width: 160px;height: 30px;margin: 8px;" type="text" class="form-control" id="so_companyname" placeholder="公司/商品名称" name="so_companyname">
                    <button type="button" class="btn btn-info btn-xs delbtn" onclick="searchProvider()">查询</button>
                </div>
                <table class="table table-hover table-bordered table-striped table-condensed" id="companyTab" style="margin-bottom: 8px;">
                    <tr id="ftr">
						<th width="4">#</th>
                        <th width="40%">商品名称</th>
                        <th width="8%">爆品价</th>
                        <th width="8%">会员价</th>
                        <th width="40%">来源公司</th>
                    </tr>
                </table>
                <div style="text-align: right;padding-right: 8px;">
                    <button type="button" class="btn btn-primary btn-xs delbtn" onclick="pageUp()">上一页</button>
                    <button type="button" class="btn btn-primary btn-xs delbtn" onclick="pageNext()">下一页</button>
                </div>
                <div style="text-align:center;">
                    <button type="button" class=" btn-primary  delbtn" onclick="queDing()">确定</button>
                    <button type="button" class=" btn-primary  delbtn" onclick="quXiao()">取消</button>
                </div>
            </div>

            <input id="pageNo" type="hidden" value="1">
            <input id="pageTotal" type="hidden">
            <input id="so_companyname_back" type="hidden">
        </div>

	</div>



	<script type="text/html" id="companyTemplate">
    <tr>
	<td>
	<input type="number" min="1" placeholder="序号" name="seq" style="width: 45px; text-align: center;">
	</td>
	<td>
	<input type="text" placeholder="输入商铺链接"  required="required" name="companyUrl">
	</td>
	<td>
	<input type="button" value="上传图片" onclick="addPicture(this)">
		<div class="imgwrap" style="display: inline" ></div>
	</td>
	<td>
	</td>
	<td>
	<span style="cursor:pointer;font-size: 15px" onclick="removeCompany(this)">删除</span>
	</td>
    </tr>
</script>

    <script type="text/html" id="productTemplate">
        <tr>
            <td>
                <input type="number" min="1" id="" placeholder="序号" name="seq" style="width: 45px; text-align: center;" maxlength="4">
            </td>
            <input type="hidden" placeholder="输入商品" name="productId"  required="required">
            <td>
                <input type="text" placeholder="选择商品" name="name" onclick="chooseProduct(this)" readonly style="cursor: pointer;">
            </td>
            <td>
                <span style="cursor:pointer;font-size: 15px" onclick="removeProduct(this)">删除</span>
            </td>
        </tr>
    </script>

<script> 

       	function addCompany() {
          $('#companyTable').append($('#companyTemplate').html());
      }
      
      function removeCompany(obj) {
    	  $(obj).parents("tr").remove();
      }
      
      function addProduct(){
          $('#proTable tbody').append($('#productTemplate').html());
      }
      
      function removeProduct(obj){
    	  $(obj).parents("tr").remove();
      }

var index;
var dialogAddCom;
function chooseProduct(obj){
    //tr的索引值
    index=$(obj).parents('tr').index();
    dialogAddCom=art.dialog({
        title:"选择商品",
        lock:true,
        content: document.getElementById('providerDiv')
    });
    initProvider(1);
}

function initProvider(pageNo,so_companyname){
    art.dialog.post({
        url : '/shop/chooseproduct.do',
        data : {
            pageNo : pageNo,so_companyname:so_companyname, so_categoryFId : $('#categoryId').val()
        },
        success : function(data){
            if(data.success){
                $("#ftr").nextAll().remove();
                var productList=data.attributes.productList;
                for (var i = 0; i < productList.length; i++) {
                    $("#companyTab").append(
                            "<tr>"
                            +"<td>"+'<input type=\"radio\" name=\"productId\" value="'+productList[i].id+'">'+"</td>"
                            +"<td  style='cursor: pointer;'><a target='_blank' href='http://${webSite!}/offer/" + productList[i].id + ".html'>"+productList[i].name+"</a></td>"//onclick='sendBackCName("+productList[i].id+",\""+productList[i].name+"\" )'
                            +"<td>"+productList[i].hotPrice+"</td>"
                            +"<td>"+productList[i].memberPrice+"</td>"
                            +"<td>"+productList[i].companyName+"</td>"
                            +"</tr>");
                }

                $("#pageTotal").val(data.attributes.totalPage);
                $("#pageNo").val(data.attributes.pageNo);
                $("#so_companyname_back").val(data.attributes.so_companyname)
            }else{
                error_msg(data.msg , function(){location.reload();});
            }
        }

    },"数据初始化中.... ");

}

function queDing(){
   var checkedRadio= $("input[name=productId]:checked");
	var choose=checkedRadio.val();
    if(!choose){
        alert("请选择一条商品信息显示在页面上");
	}else{
       var name =  checkedRadio.parent().next().find("a").text();
        sendBackCName(choose,name);

	}
}

function quXiao(){
    dialogAddCom.close();
}
function sendBackCName(cid,cname){
    //eq:第几个
    $("#proTable tr").eq(index).find('input[name$=name]').val(cname);
    $('#proTable tr').eq(index).find(' input[name$=productId]').val(cid);
    dialogAddCom.close();
}

function searchProvider(){
    var so_companyname=$("#so_companyname").val();
    initProvider(1,so_companyname);
}

function pageUp(){
    var pageNo=$("#pageNo").val();
    pageNo=parseInt(pageNo);
    if(pageNo!=1){
        pageNo=pageNo-1;
    }
    var so_companyname=$("#so_companyname_back").val();
    initProvider(pageNo,so_companyname);
}
function pageNext(){
    var pageNo=$("#pageNo").val();
    var pageTotal=$("#pageTotal").val();
    pageNo=parseInt(pageNo);
    if(pageNo!=pageTotal){
        pageNo=pageNo+1;
    }
    var so_companyname=$("#so_companyname_back").val();
    initProvider(pageNo,so_companyname);
}


//上传文件的类型gif,jpg等
      var exceldialog=null;
      var imgIndex;
      function addPicture(obj){
   	    imgIndex = $(obj);
      	exceldialog = art.dialog.uploadFile("上传图片",{callback:"uploadcallback",userpath:"admin",extensions:"gif,jpg,png,jpeg,bmp"});
      }
      
      
      //把图片地址显示在页面上
      function uploadcallback(response){
     		exceldialog.close();
          imgIndex.next().html("<span>"
     				+"<input type='hidden' name='companyImg' value='"+response.url+"' "+response.url+"'/>"
     				+"<a target='_blank'  href='"+response.url+"' ><img src='"+response.url+"' style='width: 50px;height: 50px;' ></a>"
     				+"</span>");
     	}

     	//立即提交按钮
     	function insert() {
            var neccess = true;
            $.each($('#companyTable tr'), function (i, v) {
                var $idInput = $(v).find('input[name$=id]');
                var $seqInput = $(v).find('input[name$=seq]');
                var $companyUrl = $(v).find('input[name$=companyUrl]');
                var $companyImg = $(v).find('input[name$=companyImg]');
                $idInput.prop('name', 'companyList[' + i + '].id');
                $seqInput.prop('name', 'companyList[' + i + '].seq');
                $companyUrl.prop('name', 'companyList[' + i + '].companyUrl');
                $companyImg.prop('name', 'companyList[' + i + '].companyImg');
                if ($($companyUrl).val().trim() == "") {
                    alert("请输入商铺链接");
                    neccess = false;
                    return false;
                }
            });
            $.each($('#proTable tr'), function (i, v) {
                var $idInput = $(v).find('input[name$=id]');
                var $seqInput = $(v).find('input[name$=seq]');
                var $productId = $(v).find('input[name$=productId]');
                $idInput.prop('name', 'productList[' + i + '].id');
                $seqInput.prop('name', 'productList[' + i + '].seq');
                $productId.prop('name', 'productList[' + i + '].productId');
                if ($($productId).val().trim() == "") {
                    alert("请输入产品");
                    neccess = false;
                    return false;
                }
            });
            if (neccess) {
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: "/shop/editfloor.do",
                    data: $("form").serialize(),
                    success: function (aj) {
                        if (aj.success) {
                            alert(aj.msg);
                            top.closeTempTab(true);
                        }
                    }
                });
            }
        }
</script>
</body>
</html>